<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>02_模板语法</title>
</head>

<body>
  <!--
      1. 模板的理解:
        动态的html页面
        包含了一些JS语法代码
          双大括号表达式
          指令(以v-开头的自定义标签属性)
      2. 双大括号表达式
        语法: {{exp}} 或 {{{exp}}}
        功能: 向页面输出数据
        可以调用对象的方法
      3. 指令一: 强制数据绑定
        功能: 指定变化的属性值
        完整写法:
          v-bind:xxx='yyy'  //yyy会作为表达式解析执行
        简洁写法:
          :xxx='yyy'
      4. 指令二: 绑定事件监听
        功能: 绑定指定事件名的回调函数
        完整写法:
          v-on:click='xxx'
        简洁写法:
          @click='xxx'
      -->
  <div id="app">
    <h2>1. 双大括号表达式</h2>
    <p>{{msg}}</p>
    <!-- <p>{{a}}</p> -->
    <!-- <p>{{isShow ? 'aaa' : 'bbb'}}</p> -->
    <h2>2. 指令一: 强制数据绑定</h2>
    <!-- 完整写法 -->
    <input type="text" v-bind:value="name" />
    <!-- 简写，找到vue中数据name的值，渲染到value属性上 -->
    <input type="text" :value="name" />
    <!-- html写法：value的值就是name -->
    <input type="text" value="name" />

    <!-- 双向数据绑定 -->
    <input type="text" v-model="name" />

    <h2>3. 指令二: 绑定事件监听</h2>
    <button v-on:click="handleClick">按钮</button>
    <button v-on:mousemove="handleMove">按钮</button>

    <button @click="handleClick">按钮</button>
  </div>

  <!-- 1. 引入vue.js -->
  <script src="../js/vue.js"></script>
  <script>
    /*
      Vue模板语法：插值语法和指令语法

      1. 插值语法 / 双大括号表达式：只能用于标签内，不能用于标签属性
        - 语法：{{JS表达式}}
        - 作用：动态渲染vue中的数据
        问题1: 什么是JS表达式？什么JS语句？
          表达式
            有返回值（结果值）
            没有分号
          语句
            没有返回值
            有分号（可以省略）

      2. 指令语法：都是作为标签属性使用

      - v-bind 强制绑定数据 / 单向数据绑定
        - 语法：v-bind:属性名="属性值"  v-bind:属性名="JS表达式"
        - 作用：用来给标签属性绑定一个vue动态数据(给标签属性绑定动态数据)
        - 简写：:属性名="属性值"

      - v-model 双向数据绑定
        - 语法：v-model="JS表达式"
        - 作用：双向数据绑定
          - 绑定元素的value属性，值为JS表达式的值
          - 给元素绑定input事件，在事件中收集到用户输入的值，自动修改表达式的值
          （因为表达式的值发生了变化，所以页面渲染这个表达式的其他标签也会发生变化）

      - v-on 绑定事件
        - 语法：v-on:事件名称="事件回调函数"
          - 事件名称全小写
          - 事件回调函数要定义在methods中
        - 作用：绑定事件
        - 简写：@事件名称="事件回调函数"

      3. MVVM 一种设计模式，特点可以是双向数据流
        - M - Model 数据层（代表vue中的数据-data数据）
        - V - View 视图层（代表vue的模版页面-html代码）
        - VM - ViewModel 视图模型层（vue本身，它内部做的事）

        react是单向数据流：数据只能由Model层流向View层，不能反过来
        vue是双向数据流：借助v-model实现双向
          数据能从Model层流向View层：
            绑定元素的value属性，值为JS表达式的值
            将Model层的数据渲染到View层input标签上（vm做的）
          也能从View层流向Model层
            给元素绑定input事件，在事件中收集到用户输入的值，自动修改表达式的值
            收集到View层input标签的数据赋值给Model层的数据上，数据更新了～（vm做的）
    */
    // const a = 111 // 不能渲染的
    new Vue({
      el: '#app',
      data: {
        msg: 'hello vue',
        // isShow: true
        name: '海静'
      },
      methods: {
        handleClick() {
          console.log('hello click');
        },
        handleMove() {
          console.log('hello move');
        }
      }
    })
  </script>
</body>

</html>